import React, { Component } from 'react';
import { BrowserRouter, Route, Link, withRouter } from 'react-router-dom';
import './login.css';
import Pic from '../../../images/icon/register.png';
// 输入框
import { List, InputItem, WhiteSpace } from 'antd-mobile';
import { createForm } from 'rc-form';

import { Button, WingBlank } from 'antd-mobile';

import register from '../../../api/login/register'

class BasicInputExample extends Component {
    constructor() {
        super()
        this.state = {
            code: 0,
            username: '',
            nickname: '',
            pwd: '',
            repwd: ''
        }
    }
    changeName(val) {
        this.setState({
            username: val
        })
    }
    changeNickName(val) {
        this.setState({
            nickname: val
        })
    }
    changePwd(val) {
        this.setState({
            pwd: val
        })
    }
    changeRePwd(val) {
        this.setState({
            repwd: val
        })
    }
    submit() {
        // this.props.methods(this.state)
        let msg = {
            username: this.state.username,
            password: this.state.pwd
        }
        setTimeout(() => {
            if (this.state.pwd === this.state.repwd) {
                register(msg)
                    .then(res => {
                        console.log(res)
                        console.log("this", this.state)
                        if (!res.data.status) {
                            alert(res.data.msg)
                            console.log(this, 111, this.state)
                        } else {
                            this.setState({
                                code: 1,
                            })
                        }
                        if (res.data.code === 1) {
                            this.props.history.push("/home")
                        }
                    })
            }else{
                alert("请正确填写")
            }

        }, 1000)
    }
    render() {
        // console.log(this.state)
        const { getFieldProps } = this.props.form;
        return (
            <div>
                <List renderHeader={() => ''}>
                    <InputItem
                        {...getFieldProps('userName')}
                        clear
                        placeholder="请输入账号"
                        onChange={this.changeName.bind(this)}
                        value={this.state.username}
                    >账号:</InputItem>
                    <InputItem
                        {...getFieldProps('nickName')}
                        clear
                        placeholder="请输入昵称"
                        onChange={this.changeNickName.bind(this)}
                        value={this.state.nickname}
                    >昵称:</InputItem>
                    <InputItem
                        {...getFieldProps('pwd')}
                        clear
                        placeholder="请输入密码"
                        onChange={this.changePwd.bind(this)}
                        value={this.state.pwd}
                    >密码:</InputItem>
                    <InputItem
                        {...getFieldProps('rePwd')}
                        clear
                        placeholder="请确认密码"
                        onChange={this.changeRePwd.bind(this)}
                        value={this.state.repwd}
                    >确认密码:</InputItem>
                </List>
                <WhiteSpace />
                <WingBlank>
                    <Button type="primary" onClick={this.submit.bind(this)}>注册</Button><WhiteSpace />
                </WingBlank>
            </div>
        );
    }
}

const BasicInputExampleWrapper = createForm()(BasicInputExample);

export default withRouter(BasicInputExampleWrapper)
